<template>

  <transition name="fade">
    <div id="success-container" :class="success?'popx-continue':'fadex-continue'" v-if="success">
      <div id="success-box">
        <div class="dot"></div>
        <div class="dot two"></div>
        <div class="face">
          <div class="eye"></div>
          <div class="eye right"></div>
          <div class="mouth happy"></div>
        </div>
        <div class="shadow scale"></div>
        <div class="message"><h1 class="alert">Success!</h1>
          <p>yay, everything is working.</p></div>
        <button class="button-box" @click="continueX"><h1 class="green">continue</h1></button>
      </div>
    </div>
  </transition>

</template>

<script>
export default {
  name: "SuccessBox",
  props: {
    success: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    continueX() {
      this.success = false;
    }
  }
}
</script>

<style lang="less">
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

@keyframes popx-continue {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadex-continue {
  100% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
}

.popx-continue {
  animation: popx-continue 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.fadex-continue {
  animation: fadex-continue 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@import url("https://fonts.googleapis.com/css?family=Lato:400,700");

#success-container {

  z-index: 999;
  font-family: "Lato", sans-serif;
  position: absolute;
  top: 30%;
  left: 18%;
  overflow: hidden;
  width: 245px;
  height: 250px;

  p {
    text-transform: uppercase;
    margin-top: -5px;
    font-size: 10px;
    font-weight: 100;
    color: #5e5e5e;
    letter-spacing: 1px;
  }

  .alert {
    font-weight: 700;
    letter-spacing: 5px;
  }

  h1 {
    font-size: 15px;
    font-weight: 100;
    letter-spacing: 3px;
    padding-top: 5px;
    color: #fcfcfc;
    padding-bottom: 5px;
    text-transform: uppercase;
  }

  .green {
    color: #4ec07d;
  }

  button,
  .dot {
    cursor: pointer;
  }

  #success-box {
    //position: absolute;
    width: 100%;
    height: 100%;
    //left: 12%;
    background: linear-gradient(to bottom right, #b0db7d 40%, #99dbb4 100%);
    border-radius: 20px;
    box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
    perspective: 40px;
  }

  .dot {
    width: 8px;
    height: 8px;
    background: #fcfcfc;
    border-radius: 50%;
    position: absolute;
    top: 4%;
    right: 6%;
  }

  .dot:hover {
    background: #c9c9c9;
  }

  .two {
    right: 12%;
    opacity: 0.5;
  }

  .face {
    position: absolute;
    width: 22%;
    height: 22%;
    background: #fcfcfc;
    border-radius: 50%;
    border: 1px solid #777777;
    top: 21%;
    left: 37.5%;
    z-index: 2;
    -webkit-animation: bounce 1s ease-in infinite;
    animation: bounce 1s ease-in infinite;
  }

  .face2 {
    position: absolute;
    width: 22%;
    height: 22%;
    background: #fcfcfc;
    border-radius: 50%;
    border: 1px solid #777777;
    top: 21%;
    left: 37.5%;
    z-index: 2;
    -webkit-animation: roll 3s ease-in-out infinite;
    animation: roll 3s ease-in-out infinite;
  }

  .eye {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #777777;
    border-radius: 50%;
    top: 40%;
    left: 20%;
  }

  .right {
    left: 68%;
  }

  .mouth {
    position: absolute;
    top: 43%;
    left: 41%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }

  .happy {
    border: 2px solid;
    border-color: transparent #777777 #777777 transparent;
    transform: rotate(45deg);
  }

  .shadow {
    position: absolute;
    width: 21%;
    height: 3%;
    opacity: 0.5;
    background: #777777;
    left: 40%;
    top: 43%;
    border-radius: 50%;
    z-index: 1;
  }

  .scale {
    -webkit-animation: scale 1s ease-in infinite;
    animation: scale 1s ease-in infinite;
  }

  .move {
    -webkit-animation: move 3s ease-in-out infinite;
    animation: move 3s ease-in-out infinite;
  }

  .message {
    position: absolute;
    width: 100%;
    text-align: center;
    height: 40%;
    top: 47%;
  }

  .button-box {
    position: absolute;
    background: #fcfcfc;
    width: 50%;
    height: 15%;
    border-radius: 20px;
    top: 73%;
    left: 25%;
    outline: 0;
    border: none;
    box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
    transition: all 0.5s ease-in-out;
  }

  .button-box:hover {
    background: #efefef;
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
  }
}


@-webkit-keyframes bounce {
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bounce {
  50% {
    transform: translateY(-10px);
  }
}

@-webkit-keyframes scale {
  50% {
    transform: scale(0.9);
  }
}

@keyframes scale {
  50% {
    transform: scale(0.9);
  }
}

@-webkit-keyframes roll {
  0% {
    transform: rotate(0deg);
    left: 25%;
  }
  50% {
    left: 60%;
    transform: rotate(168deg);
  }
  100% {
    transform: rotate(0deg);
    left: 25%;
  }
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
    left: 25%;
  }
  50% {
    left: 60%;
    transform: rotate(168deg);
  }
  100% {
    transform: rotate(0deg);
    left: 25%;
  }
}

@-webkit-keyframes move {
  0% {
    left: 25%;
  }
  50% {
    left: 60%;
  }
  100% {
    left: 25%;
  }
}

@keyframes move {
  0% {
    left: 25%;
  }
  50% {
    left: 60%;
  }
  100% {
    left: 25%;
  }
}


</style>